<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>
    goog.ui.OfflineInstallDialog, goog.ui.OfflineStatusCard, and
    goog.ui.OfflineStatusComponent
  </title>
  <script src="../base.js"></script>
  <script>
    goog.require('goog.events');
    goog.require('goog.events.EventType');
    goog.require('goog.gears.StatusType');
    goog.require('goog.ui.OfflineInstallDialog');
    goog.require('goog.ui.OfflineInstallDialogScreen');
    goog.require('goog.ui.OfflineStatusCard');
    goog.require('goog.ui.OfflineStatusComponent');
  </script>
  <link rel="stylesheet" href="css/demo.css">
  <link rel="stylesheet" href="../css/offline.css">
  <style>
    /* Misc. styles.*/
    fieldset {
      width: 80%;
    }

    label, input {
      vertical-align: middle;
    }

    .log {
      color: #369;
      font-size: 95%;
    }

    .perf {
      position: absolute;
      right: 0;
      bottom: 0;
      margin: 0;
      border: 0;
      padding: 10px;
      text-align: right;
      color: #888;
      font-size: 90%;
      font-style: italic;
    }

    .link {
      cursor: pointer;
      text-decoration: underline;
      color: #0000cc;
    }

    #relative-cards .goog-offlinestatuscard {
      position: relative;
    }
  </style>
</head>
<body>
  <h1>goog.ui.OfflineInstallDialog</h1>
  <fieldset>
    <legend>
      These dialogs show the install flow for the user:
      &nbsp;
    </legend>
    <div id="d1" class="link">Click for install flow</div>
    <div id="d2" class="link">Click for upgrade flow</div>
    <div id="d3" class="link">Click for enable flow</div>
    <div id="d4" class="link">Click for custom screen</div>
  </fieldset>
  <h1>goog.ui.OfflineStatusCard</h1>
  <fieldset>
    <legend>
      These cards show the various configurations:
      &nbsp;
    </legend>
    <div id="relative-cards">
      <div id="c1"></div>
      <div id="c2"></div>
      <div id="c3"></div>
      <div id="c4"></div>
      <div id="c5"></div>
      <div id="c6"></div>
      <div id="c7"></div>
    </div>
  </fieldset>
  <h1>goog.ui.OfflineStatusComponent</h1>
  <fieldset>
    <legend>
      These components show the various configurations (hover for tooltip, click for details):
      &nbsp;
    </legend>
    <div><strong>Offline:</strong>&nbsp;<span id="comp3"></span></div>
    <div><strong>Online:</strong>&nbsp;<span id="comp4"></span></div>
    <div><strong>Syncing:</strong>&nbsp;<span id="comp5"></span></div>
    <div><strong>Paused:</strong>&nbsp;<span id="comp6"></span></div>
    <div><strong>Error:</strong>&nbsp;<span id="comp7"></span></div>
    <div><strong>Not Installed:</strong>&nbsp;<span id="comp1"></span></div>
    <div><strong>Installed:</strong>&nbsp;<span id="comp2"></span></div>
  </fieldset>
  <p id="log" class="log"></p>
  <p id="perf" class="perf"></p>
  <script>

  var timer = goog.now();

  // Message constants.
  var MSG_GEARS_ENABLE_DESCRIPTION = goog.getMsg('Use the ' +
      '<strong>Gears</strong> browser plug-in to <strong>view all ' +
      'your documents</strong> even when you don\'t have a connection to ' +
      'the internet.');

  var MSG_GEARS_INSTALL_DESCRIPTION = goog.getMsg('Install the ' +
        '<strong>Gears</strong> browser plug-in to <strong>view all ' +
        'your documents</strong> even when you don\'t have a connection to ' +
        'the internet.');

  var MSG_GEARS_DIALOG_TITLE = goog.getMsg(
      'Access Google Docs even when you\'re offline!');
  var APP_URL = 'docs.google.com';
  var GEARS_DOWNLOAD_PAGE_URL = 'http://gears.google.com/';

  function createDialog() {
    var dialog = new goog.ui.OfflineInstallDialog();

    dialog.setTitle(MSG_GEARS_DIALOG_TITLE);
    dialog.setAppUrl(APP_URL);
    dialog.setGearsDownloadPageUrl(GEARS_DOWNLOAD_PAGE_URL);
    return dialog;
  }

  // Setup the dialogs.
  var d1 = createDialog();
  d1.getScreen(goog.ui.OfflineInstallDialog.ScreenType.INSTALL)
      .setInstallDescription(MSG_GEARS_INSTALL_DESCRIPTION);
  d1.setCurrentScreenType(goog.ui.OfflineInstallDialog.ScreenType.INSTALL);
  d1.render();
  goog.events.listen(goog.dom.getElement('d1'), goog.events.EventType.CLICK,
      function(e) {
        d1.setVisible(true);
      });

  var d2 = createDialog();
  d2.getScreen(goog.ui.OfflineInstallDialog.ScreenType.UPGRADE)
      .setUpgradeDescription('Upgrade message goes here');
  d2.setCurrentScreenType(goog.ui.OfflineInstallDialog.ScreenType.UPGRADE);
  d2.render();
  goog.events.listen(goog.dom.getElement('d2'), goog.events.EventType.CLICK,
      function(e) {
        d2.setVisible(true);
      });

  var d3 = createDialog();
  d3.getScreen(goog.ui.OfflineInstallDialog.ScreenType.ENABLE)
      .setContent(MSG_GEARS_ENABLE_DESCRIPTION);
  d3.setCurrentScreenType(goog.ui.OfflineInstallDialog.ScreenType.ENABLE);
  d3.render();
  goog.events.listen(goog.dom.getElement('d3'), goog.events.EventType.CLICK,
      function(e) {
        d3.setVisible(true);
      });

  var d4 = createDialog();
  var customScreen = new goog.ui.OfflineInstallDialogScreen(d4, 'custom');
  customScreen.setContent('Custom content');
  customScreen.setTitle('Custom title');
  var bs = new goog.ui.Dialog.ButtonSet();
  bs.set(goog.ui.Dialog.DefaultButtonKeys.OK, 'Okidoki', true);
  customScreen.setButtonSet(bs);
  customScreen.handleSelect = function(e) {
    alert(e.key);
  };
  d4.registerScreen(customScreen);
  d4.setCurrentScreenType('custom');
  d4.render();
  goog.events.listen(goog.dom.getElement('d4'), goog.events.EventType.CLICK,
      function(e) {
        d4.setVisible(true);
      });


  // Setup the cards.
  var c1 = new goog.ui.OfflineStatusCard();
  c1.setStatus(goog.gears.StatusType.NOT_INSTALLED);
  c1.render(goog.dom.getElement('c1'));

  var c2 = new goog.ui.OfflineStatusCard();
  c2.setStatus(goog.gears.StatusType.INSTALLED);
  c2.render(goog.dom.getElement('c2'));

  var c3 = new goog.ui.OfflineStatusCard();
  c3.setStatus(goog.gears.StatusType.OFFLINE);
  c3.render(goog.dom.getElement('c3'));

  var c4 = new goog.ui.OfflineStatusCard();
  c4.setStatus(goog.gears.StatusType.ONLINE);
  c4.render(goog.dom.getElement('c4'));

  var c5 = new goog.ui.OfflineStatusCard();
  c5.setStatus(goog.gears.StatusType.SYNCING);;
  c5.render(goog.dom.getElement('c5'));
  c5.getProgressBar().setValue(84)

  var c6 = new goog.ui.OfflineStatusCard();
  c6.setStatus(goog.gears.StatusType.PAUSED);
  c6.render(goog.dom.getElement('c6'));

  var c7 = new goog.ui.OfflineStatusCard();
  c7.setStatus(goog.gears.StatusType.ERROR);
  c7.render(goog.dom.getElement('c7'));



  // Setup the components.
  var comp1 = new goog.ui.OfflineStatusComponent();
  comp1.setInstallDialog(createDialog());
  comp1.setStatusCard(new goog.ui.OfflineStatusCard());
  comp1.setStatus(goog.gears.StatusType.NOT_INSTALLED);
  comp1.render(goog.dom.getElement('comp1'));

  var comp2 = new goog.ui.OfflineStatusComponent();
  comp2.setInstallDialog(createDialog());
  comp2.setStatusCard(new goog.ui.OfflineStatusCard());
  comp2.setStatus(goog.gears.StatusType.INSTALLED);
  comp2.render(goog.dom.getElement('comp2'));

  var comp3 = new goog.ui.OfflineStatusComponent();
  comp3.setInstallDialog(createDialog());
  comp3.setStatusCard(new goog.ui.OfflineStatusCard());
  comp3.setStatus(goog.gears.StatusType.OFFLINE);
  comp3.render(goog.dom.getElement('comp3'));

  var comp4 = new goog.ui.OfflineStatusComponent();
  comp4.setInstallDialog(createDialog());
  comp4.setStatusCard(new goog.ui.OfflineStatusCard());
  comp4.setStatus(goog.gears.StatusType.ONLINE);
  comp4.render(goog.dom.getElement('comp4'));

  var comp5 = new goog.ui.OfflineStatusComponent();
  comp5.setInstallDialog(createDialog());
  comp5.setStatusCard(new goog.ui.OfflineStatusCard());
  comp5.setStatus(goog.gears.StatusType.SYNCING);
  comp5.render(goog.dom.getElement('comp5'));

  var comp6 = new goog.ui.OfflineStatusComponent();
  comp6.setInstallDialog(createDialog());
  comp6.setStatusCard(new goog.ui.OfflineStatusCard());
  comp6.setStatus(goog.gears.StatusType.PAUSED);
  comp6.render(goog.dom.getElement('comp6'));

  var comp7 = new goog.ui.OfflineStatusComponent();
  comp7.setInstallDialog(createDialog());
  comp7.setStatusCard(new goog.ui.OfflineStatusCard());
  comp7.setStatus(goog.gears.StatusType.ERROR);
  comp7.render(goog.dom.getElement('comp7'));

  goog.dom.setTextContent(goog.dom.getElement('perf'),
      (goog.now() - timer) + 'ms');

  </script>
</body>
</html>
